<template>
  <div class="oce-toolbar">
    <!-- 左侧栏 -->
    <div class="oce-toolbar_left">
      <slot name="menuLeftTop"></slot>
      <span class="defaultBtn">
        <el-button
          v-if="vaildData(option.addBtn, config.toolbar.addBtn)"
          size="mini"
          type="primary"
          icon="el-icon-plus"
          :plain="config.plain"
          @click="add"
        >
          新 增
        </el-button>
        <!-- <el-button
        size="mini"
        type="success"
        icon="el-icon-edit"
        @click="edit"
        v-if="vaildData(option.editBtn, config.toolbar.editBtn)"
      >
        修 改
      </el-button> -->
        <el-button
          v-if="vaildData(option.delBtn, config.toolbar.delBtn)"
          size="mini"
          type="danger"
          icon="el-icon-delete"
          :plain="config.plain"
          @click="remove"
        >
          删 除
        </el-button>
        <!-- <el-button
        size="mini"
        type="primary"
        icon="el-icon-download"
        @click="importExcel"
        v-if="vaildData(option.importBtn)"
      >
        导 入
      </el-button>
      <el-button
        size="mini"
        type="primary"
        icon="el-icon-upload2"
        @click="exportExcel"
        v-if="vaildData(option.exportBtn)"
      >
        导 出
      </el-button>
      <el-button
        size="mini"
        type="primary"
        icon="el-icon-download"
        @click="downloadTemplate"
        v-if="vaildData(option.dowTempBtn)"
      >
        模板下载
      </el-button> -->
      </span>
      <slot name="menuLeft"></slot>
    </div>
    <!-- 右侧栏 -->
    <div class="oce-toolbar_right">
      <slot name="menuRightTop"></slot>
      <el-tooltip
        class="item"
        effect="dark"
        content="刷 新"
        placement="top"
        v-if="vaildData(option.refreshBtn, true)"
      >
        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh" />
      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="显 隐" placement="top">
        <el-button
          size="mini"
          circle
          icon="el-icon-s-operation"
          @click="showOperation"
        />
      </el-tooltip>

      <el-tooltip
        class="item"
        effect="dark"
        :content="showSearch ? '隐藏搜索' : '显示搜索'"
        placement="top"
      >
        <!--
          .sync语法糖
          @event update:showSearch
        -->
        <el-button
          size="mini"
          circle
          icon="el-icon-search"
          @click="$emit('update:showSearch', !showSearch)"
          v-if="$ocean.vaildData(option.showSearch, true)"
        />
      </el-tooltip>
      <slot name="menuRight"></slot>
    </div>

    <component
      title="表格配置"
      destroy-on-close
      size="600px"
      :is="
        $ocean.vaildData(
          option.configLocalDisplay,
          config.toolbar.configLocalDisplay
        )
          ? 'oce-drawer'
          : 'el-drawer'
      "
      :visible.sync="showDrawer"
    >
      <multi-table-cloumn
        v-if="columnOption && activeTabProp"
        v-bind="$attrs"
        v-on="$listeners"
        :columnOption="columnOption"
        :activeTabProp="activeTabProp"
        :filterTableData="filterTableData"
        :filterTableColumn="filterTableColumn"
        :checkboxChange="checkboxChange"
      ></multi-table-cloumn>
      <single-table-cloumn
        :filterTableData="filterTableData"
        :filterTableColumn="filterTableColumn"
        :checkboxChange="checkboxChange"
        v-else
      ></single-table-cloumn>
    </component>
  </div>
</template>

<script>
import config from '../../config'
import singleTableCloumn from './components/singleTableCloumn'
import multiTableCloumn from './components/multiTableCloumn'

/**
 * 工具栏组件
 */
export default {
  name: 'OceToolbar',
  components: { singleTableCloumn, multiTableCloumn },
  data() {
    return {
      config,
      activeTab: '表格一',
      showDrawer: false,
      filterTableColumn: [
        {
          label: '列名称',
          prop: 'label',
          type: 'text',
        },
        // {
        //   label: 'Key',
        //   prop: 'prop',
        //   type: 'text',
        // },
        // {
        //   label: '列宽度',
        //   prop: 'width',
        //   type: 'input',
        // },
        {
          label: '隐藏',
          prop: 'hide',
          type: 'checkbox',
        },
        {
          label: '冻结',
          prop: 'fixed',
          type: 'checkbox',
        },
        {
          label: '排序',
          prop: 'sortable',
          type: 'checkbox',
        },
      ],
      filterTableData: [],
    }
  },
  props: {
    /**
     * 是否显示搜索栏，支持 .sync 修饰符
     */
    showSearch: {
      type: Boolean,
    },
    /**
     * 组件配置属性，详情见下面Option属性
     */
    option: {
      type: Object,
      default: () => {},
    },
    /**
     * 项目列配置，继承crud组件column属性所有字段，独有属性详情见下面Column属性
     */
    column: {
      type: Array,
      default: () => [],
    },
    // 多表列配置
    columnOption: Object,
    // 活跃表Key（多表）
    activeTabProp: String,
  },
  mounted() {
    setTimeout(() => {
      this.initFilterTableData()
    }, 2000)
    // this.initFilterTableData()
  },
  methods: {
    checkboxChange(e, index, prop) {
      let column = this.$ocean.deepClone(this.column)
      column[this.filterTableData[index].index][prop] = e
      this.$emit('update:column', column)
    },
    // 初始化过滤表格数据
    initFilterTableData() {
      let data = this.column?.map((item, index) => {
        return {
          label: item.label,
          prop: item.prop,
          hide: false,
          fixed: false,
          sortable: false,
          showColumn: item.showColumn,
          index,
        }
      })
      data = data.filter((item) => this.vaildData(item.showColumn, true))
      this.filterTableData = data || []
    },
    // 显隐控制
    showOperation() {
      this.showDrawer = true
    },
    // 验证是否存在true/false
    vaildData(val, dafult) {
      return this.$ocean.vaildData(val, dafult)
    },
    // 刷新
    refresh() {
      /**
       * 刷新按钮事件
       */
      this.$emit('refresh')
    },
    // 新增
    add() {
      /**
       * 新增按钮事件
       */
      this.$emit('add')
    },
    // 修改
    edit() {
      /**
       * 修改按钮事件
       */
      this.$emit('edit')
    },
    // 删除
    remove() {
      /**
       * 删除按钮事件
       */
      this.$emit('remove')
    },
    importExcel() {
      /**
       * 导入按钮事件
       */
      this.$emit('import-excel')
    },
    exportExcel() {
      /**
       * 导出按钮事件
       */
      this.$emit('export-excel')
    },
    downloadTemplate() {
      /**
       * 模板下载按钮事件
       */
      this.$emit('download-template')
    },
  },
}
</script>

<style lang="scss" scoped>
.oce-toolbar {
  width: calc(100% - 8px);
  display: flex;
  justify-content: space-between;
  padding: 4px;

  ::v-deep .el-drawer__body {
    height: calc(100% - 77px);
  }
  .defaultBtn {
    padding-right: 10px;
  }
}
</style>
